<template>

  <section class="index-job">
    <div class="job" v-for="(job,index) in jobArr.slice(2,3)" :key="index">
      <div class="job_title">
        —— {{ job.title }} ——
      </div>
      <div class="job0">
        <div class="job1">
          <p class="p1">{{ job.items[0].title }}</p>
          <p class="p2">精品打折 <span>{{job.items[0].price}}元</span></p>
          <router-link :to="{path:'/ProductDetails',query: {id: job.items[0].gid}}"><img :src="job.items[0].image" alt=""></router-link>
        </div>
        <div class="job2">
          <div class="job3">
            <div class="aa">
              <p class="p1">{{ job.items[1].title }}</p>
              <p class="p2">品质精挑</p>
            </div>
            <div class="bb">
              <router-link :to="{path:'/ProductDetails',query: {id: job.items[1].gid}}"><img :src="job.items[1].image" alt=""></router-link>
            </div>
          </div>
          <div class="job4">
            <div class="aa">
              <p class="p1">{{ job.items[2].title }}</p>
              <p class="p2">品质精挑</p>
            </div>
            <div class="bb">
              <router-link :to="{path:'/ProductDetails',query: {id: job.items[1].gid}}"><img :src="job.items[2].image" alt=""></router-link>
            </div>
          </div>
        </div>
        <div class="job5" v-for="(jobs,index) in job.items.slice(3)" :key="index">
          <p class="p1">{{ jobs.title }}</p>
          <router-link :to="{path:'/ProductDetails',query: {id: jobs.gid}}"><img :src="jobs.image" alt=""></router-link>
          <p class="p2">¥{{ jobs.price }}</p>
          <p class="p3">¥186.25</p>
          </div>
      </div>
    </div>
  </section>

</template>

<script>
  import axios from 'axios';
  export default  {
    name: 'index-job',
    props: [],
    created() {
      axios.get("http://vueshop.glbuys.com/api/home/index/goodsLevel?token=1ec949a15fb709370f")
      .then((res)=>{
        this.jobArr = res.data.data;
        // console.log("办公",res.data.data.slice(2,3))
      })
    },
    data() {
      return {
        jobArr:[]
      }
    },
    methods: {

    },
    computed: {

    }
}
</script>

<style scoped>
  .job{
    height: 6rem;
    background: #fff;
    margin-top: 0.18rem;
  }
  .job_title{
    font-size: 0.26rem;
    color: #5fc600;
    text-align: center;
    height: 0.6rem;
    line-height: 0.6rem;
    border-bottom: 0.02rem solid #f7f7f7;
  }
  .job0{
    border-bottom: 0.02rem solid #f7f7f7;
  }
  .job1{
    float: left;
    height: 2.4rem;
    width: 49%;
    border-right: 0.02rem solid #f7f7f7;
    border-bottom: 0.02rem solid #f7f7f7;
  }
  .job1 .p1{
    font-size: 0.25rem;
    font-weight: bold;
    margin-left: 0.16rem;
    margin-top: 0.25rem;
    overflow: hidden;    
    white-space: nowrap;
  }
  .job1 .p2{
    color: #cb385d;
    font-size: 0.22rem;
    margin-left: 0.16rem;
  }
  .job1 p{
    line-height: 0.37rem;
  }
  .job1 .p2 span{
    background: #5fc600;
    color: #fff;
    padding: 0.08rem 0.04rem;
    border-radius: 0.25rem;
    margin-left: 0.6rem;
  }
  .job1 img{
    width: 3rem;
    height: 1.45rem;
    margin-left: 0.37rem;
  }
  .job2{
    float: left;
    width: 50%;
    height: 2.4rem;
    border-bottom: 0.02rem solid #f7f7f7;
  }
  .job3{
    height: 50%;
  }
  .job3 .aa{
    float: left;
    margin-left: 0.16rem;
    
  }
  .job3 .aa .p1{
    font-weight: bold;
    margin-top: 0.17rem;
    overflow: hidden;    
    white-space: nowrap;
    font-size: 0.25rem;
    width: 1.68rem;
  }
  .job3 .aa .p2{
    color: #7b7f82;
    font-size: 0.22rem;
  }
  .job3 .bb{
    float: right;
    margin-right: 0.49rem;
  }
  .job3 .bb img{
    width: 1.2rem;
    height: 1.16rem;
  }
  .job4{
    border-top: 0.02rem solid #f7f7f7;
    height: 49%;
  }
  .job4 .aa{
    float: left;
    margin-left: 0.16rem;
  }
  .job4 .aa .p1{
    font-weight: bold;
    margin-top: 0.17rem;
    overflow: hidden;    
    white-space: nowrap;
    width: 1.68rem;
        font-size: 0.25rem;
  }
  .job4 .aa .p2{
    color: #7b7f82;
    font-size: 0.22rem;
  }
  .job4 .bb{
    float: right;
    margin-right: 0.49rem;
  }
  .job4 .bb img{
    width: 1.2rem;
    height: 1.16rem;
  }
  .job5{
    width: 24.5%;
    border-right: 0.02rem solid #f7f7f7;
    overflow: hidden;
    text-align: center;
    float: left;
  }
  .job5 .p1{
    margin-top: 0.28rem;
    font-weight: bold;
    white-space: nowrap;
    font-size: 0.26rem;
    margin-left: 0.07rem;
  }
  .job5 img{
    width: 1.5rem;
    height: 1.5rem;
  }
  .job5 .p2{
    color: #d32a4e;
  }
  .job5 .p3{
    color: #7b7f82;
    text-decoration: line-through;
  }
  .job5:nth-last-child(){
    width: 24%;
    border-right: none;
  }
</style>
